<template>
  <div class="app-container citycate">
    <div class="category" v-for="(item,idx) in data" v-if="item.value<999">
      <h4>{{ item.label }}
        <span @click="newData(item.value,item.label)">
          <i class="el-icon-edit"></i> 新增
        </span>
      </h4>
      <div class="children">
        <div class="name" v-for="(item2,idx2) in item.children">{{ item2.label }}</div>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      title="新增"
      width="30%"
    >
      <el-form
        :model="temp"
        label-width="120px"
        label-position="right"
      >
        <el-form-item :label="`在${checkName}下新增`">
          <el-input v-model="temp.c_name" placeholder="请输入新增名称"/>
        </el-form-item>
        <el-form-item :label="`负责人名`">
          <el-input v-model="temp.c_name_p" :placeholder="`${temp.c_name}书记`"/>
          <P style="margin-top:5px;color:Red">不填则默认灰色内容</P>
        </el-form-item>
      </el-form>
      <div class="text-right">
        <el-button type="danger" @click="dialogVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="submit">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>

</template>
<style lang="less" scoped>
.citycate {
  overflow-y: scroll;

  h4 {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    margin: 0;
    font-size: 22px;
    margin-top: 30px;

    span {
      color: #20a0ff;
      font-size: 14px;
      margin-left: 10px;
      cursor: pointer;
      font-weight: normal;
    }
  }

  .children {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;

    .name {
      width: 200px;
      color: #555;
      font-weight: normal;
      margin: 5px 0;
    }
  }
}
</style>
<script>
import { getCity,createCity } from '@/api/user'

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      data: [],
      temp: {
        c_name: '',
        c_name_p: '',
        checkCid:''
      },
      checkName: '',
      checkCid: '',
      dialogVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    newData(cid, name) {
      this.dialogVisible = true
      this.checkName = name
      this.temp.checkCid = cid
    },
    submit() {
      if (!this.temp.c_name) {
        this.$message({
          message: '请填入地方名',
          type: 'error'
        })
      } else if (!this.temp.checkCid) {
        this.$message({
          message: '参数错误',
          type: 'error'
        })
      } else {
        createCity(this.temp).then(r => {
           this.fetchData()
        })
      }
    },
    fetchData() {
      getCity().then(r => {
        this.data = r.data.city
      })
    }
  }
}
</script>
